<template>
  <!-- 这是一个分步表单组件 -->

  <div style="max-width: 600px">
    <!-- 步骤条 -->
    <el-steps :active="currentStep" finish-status="success" align-center>
      <el-step v-for="(step, index) in steps" :key="index" :title="step.title" />
    </el-steps>

    <!-- 表单内容 -->
    <div class="mt" v-if="currentStep === 0">
      <slot name="step-1"></slot>
    </div>

    <div class="mt" v-if="currentStep === 1">
      <slot name="step-2"></slot>
    </div>

    <div class="mt" v-if="currentStep === 2">
      <slot name="step-3"></slot>
    </div>

    <!-- 上一步 下一步 按钮 -->
    <div class="step-buttons">
      <el-button v-if="currentStep > 0" @click="prevStep"> 上一步</el-button>
      <el-button type="primary" @click="nextStep">
        {{ currentStep === steps.length - 1 ? "提交" : "下一步" }}
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

// 当前步骤
const currentStep = ref<number>(0);

// 接收父组件传递的步骤数据
const props = defineProps(["steps", "form1", "form2", "form3"]);
const emit = defineEmits(["handleSubmit"]);
// 下一步 按钮逻辑
const nextStep = () => {
  const forms = [props.form1, props.form2, props.form3];

  const currentForm = forms[currentStep.value];

  currentForm.validate((valid: boolean) => {
    if (valid) {
      if (currentStep.value < props.steps.length - 1) {
        currentStep.value++;
      } else {
        emit("handleSubmit"); // 提交表单
      }
    }
  });
};

// 上一步 按钮逻辑
const prevStep = () => {
  if (currentStep.value > 0) {
    currentStep.value--;
  }
};
</script>

<style scoped lang="ts"></style>
